<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragment/Headfragment::Headfragment"></head>
<body>
<!-- navbar-->
<header th:replace="fragment/PageHeadfragment::PageHeadfragment"></header>
<div class="d-flex align-items-stretch">
    <div th:replace="fragment/Navigationfragment::Navigationfragment"></div>
    <div class="page-holder w-100 d-flex flex-wrap">
        <div class="container-fluid px-xl-5">
            <section class="py-5">
                <div class="row">
                    <!-- Basic Form-->

                    <!-- Form Elements -->
                    <div class="col-lg-12 mb-5">
                        <div class="card">

                            <div class="card-header horspilt">

                                <div style="width: 70%;margin-top: auto;margin-bottom: auto">
                                    <h3 class="h6 text-uppercase mb-0" style="margin-top: auto;margin-bottom: auto">新建数据表</h3>

                                </div>

                                <div style="width: 30%;" class="horspilt" >
                                    <button id="createfield" onclick="createfield()" class="btn btn-primary" >新建字段</button>
                                    <button id="delfield" onclick="delfield()" class="btn btn-primary" >删除字段</button>
                                </div>

                            </div>
                            <div class="card-body">
                                <form class="form-horizontal" action="usercreatetable/createtable" method="post">
                                    <div style="display: flex">
                                        <h6 style="width: 20%;margin-top: auto;margin-bottom: auto">数据表名</h6>
                                        <input style="width: 20%" type="text" name="tablename" placeholder="数据表名"
                                               class="form-control ">
                                    </div>
                                    <div class="line"></div>
                                    <table id="fieldform" class="table table-striped card-text">
                                        <tr>
                                            <th style="width: 20%;text-align: center">字段名</th>
                                            <th style="width: 20%;text-align: center">字段类型</th>
                                            <th style="width: 20%;text-align: center">字段长度</th>
                                            <th style="width: 20%;text-align: center">是否主键</th>
                                            <th style="width: 20%;text-align: center">注释</th>
                                        </tr>
                                        <tr>
                                            <td style="width: 20%"><input type="text" name="field" placeholder="字段名"
                                                                          class="form-control "></td>
                                            <td style="width: 20%">
                                                <select name="field" placeholder="字段类型" class="form-control">
                                                    <option selected>bigint</option>
                                                    <option>char</option>
                                                    <option>varchar</option>
                                                </select>
                                            </td>
                                            <td style="width: 20%"><input type="text" name="field" placeholder="字段长度"
                                                                          class="form-control ">
                                            </td>
                                            <td style="width: 20%"><select name="field" placeholder="是否主键"
                                                                           class="form-control">
                                                <option selected value="0">否</option>
                                                <option value="1">是</option>
                                            </select>
                                            </td>
                                            <td style="width: 20%"><input type="text" name="field" placeholder="注释"
                                                                          class="form-control" value="无"></td>
                                        </tr>
                                    </table>

                                    <div class="line"></div>
                                    <div class="form-group row">
                                        <div class="col-md-9 ml-auto">
                                            <button type="submit" class="btn btn-primary">创建</button>
                                            <button type="reset" class="btn btn-secondary">取消</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <footer class="footer bg-white shadow align-self-end py-3 px-xl-5 w-100">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6 text-center text-md-left text-primary">
                        <p class="mb-2 mb-md-0">Your company &copy; 2018-2020</p>
                    </div>
                    <div class="col-md-6 text-center text-md-right text-gray-400">
                        <p class="mb-0">Copyright &copy; 2019.Company name All rights reserved.<a target="_blank"
                                                                                                  href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
                        </p>
                        <!-- Please do not remove the backlink to us unless you support further theme's development at https://bootstrapious.com/donate. It is part of the license conditions. Thank you for understanding :)-->
                    </div>
                </div>
            </div>
        </footer>
    </div>
</div>
<!-- JavaScript files-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper.js/umd/popper.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/jquery.cookie/jquery.cookie.js"></script>
<script src="vendor/chart.js/Chart.min.js"></script>
<script src="js/js.cookie.min.js"></script>
<script src="js/front.js"></script>
<script>
    function createfield() {

        var form = document.getElementById("fieldform");

        var tr = document.createElement("tr");
        form.appendChild(tr);

        var text1 = document.createElement("input");
        var td1 = document.createElement("td");
        text1.type = "text";
        text1.name = "field";
        text1.placeholder = "字段名";
        text1.className = "form-control";
        td1.style.width = "20%";
        td1.appendChild(text1);
        tr.appendChild(td1);

        var sel = document.createElement("select");
        var td2 = document.createElement("td");
        sel.name = "field";
        sel.placeholder = "字段类型";
        sel.className = "form-control";
        sel.selectedIndex = "0";
        td2.style.width = "20%";
        td2.appendChild(sel);
        tr.appendChild(td2);
        sel.options.add(new Option("bigint", "bigint"));
        sel.options.add(new Option("char", "char"));
        sel.options.add(new Option("varchar", "varchar"));


        var text2 = document.createElement("input");
        var td3 = document.createElement("td");
        text2.type = "text";
        text2.name = "field";
        text2.placeholder = "字段长度";
        text2.className = "form-control";
        td3.style.width = "20%";
        td3.appendChild(text2);
        tr.appendChild(td3);

        var keysel = document.createElement("select");
        var td4 = document.createElement("td");
        keysel.name = "field";
        keysel.placeholder = "是否主键";
        keysel.className = "form-control";
        keysel.selectedIndex = "0";
        td4.style.width = "20%";
        td4.appendChild(keysel);
        tr.appendChild(td4);
        keysel.options.add(new Option("否", "0"));
        keysel.options.add(new Option("是", "1"));

        var text3 = document.createElement("input");
        var td5 = document.createElement("td");
        text3.type = "text";
        text3.name = "field";
        text3.placeholder = "注释";
        text3.value = "无";
        text3.className = "form-control";
        td5.style.width = "20%";
        td5.appendChild(text3);
        tr.appendChild(td5);

    }


    function delfield() {
        var trs = document.getElementsByTagName("tr");

        var tbody = document.getElementById("fieldform");
        tbody.removeChild(trs[trs.length - 1]);
    }


</script>
</body>
</html>